import React, { Fragment, memo } from 'react'
import type { FC, ReactNode } from 'react'
import { NewAblumWrapper } from './styled'
import AreaHeaderV1 from '@/components/area-header-v1'
import { Carousel } from 'antd'
import AlbumListItem from '@/components/album-list-item'
import { useAppSelector } from '@/store'

interface Iprops {
  children?: ReactNode
}

const NewAblum: FC<Iprops> = () => {
  const albumNewest = useAppSelector((state) => state.recommend.albumNewest)
  return (
    <NewAblumWrapper>
      <AreaHeaderV1 title="新碟上架" moreLink="/discover/album" />
      <div className="content">
        <div className="inner">
          <Carousel arrows adaptiveHeight dots={false}>
            {/* 0 --> 0,1,2,3,4  0*5 */}
            {/* 1 --> 5,6,7,8,9  （1+1）*5 */}
            {[0, 1].map((item) => {
              return (
                <div key={item} className="item-list">
                  {albumNewest.slice(item * 5, (item + 1) * 5).map((album) => (
                    <Fragment key={album.id}>
                      <AlbumListItem albumItemData={album} />
                    </Fragment>
                  ))}
                </div>
              )
            })}
          </Carousel>
        </div>
      </div>
    </NewAblumWrapper>
  )
}
export default memo(NewAblum)
